<template>
  <div class="about">
      <el-main class="center" style="width: 1200px;margin-top: 85px;">
        <el-row gutter="20">
          <!--            //左边轮播图-->
          <el-col span="12" style="align-content: center;padding-top: 0px;z-index: -1">
            <el-card>
              <div class="block">
                <el-carousel width="100%">
                  <el-carousel-item v-for="item in imageUrlArr" :key="item">
                    <img :src="item" style="width: 100%">
                  </el-carousel-item>
                </el-carousel>
              </div>
            </el-card>
            <el-card>
              <div>
                <el-button type="primary" @click="addToWishlist">加入心愿单</el-button>
                <el-button type="success" @click="contactSeller">联系卖家</el-button>
                <el-button type="danger" @click="order">立即下订</el-button>
              </div>
            </el-card>
            <el-card>
              <ul class="aaa">
                <li class="bbb">
                  <h6>上牌时间:</h6>
                  <p v-text="details.upPlateCreate"></p>
                </li>
                <li class="bbb">
                  <h6> 里程: </h6>
                  <p v-text="details.mileage"></p>
                </li>
                <li class="bbb">
                  <h6> 排量: </h6>
                  <p v-text=""> 2.0L </p>
                </li>
                <li class="bbb">
                  <h6> 排放: </h6>
                  <p v-text=""> 国Ⅵ </p>
                </li>
                <li class="bbb">
                  <h6> 所在地: </h6>
                  <p v-text="details.address"></p>
                </li>
              </ul>
            </el-card>

          </el-col>
          <!--            //右边信息框-->
          <el-col  span="12" style="align-content: center;padding-top: 0px">
            <p v-text="details.title"></p>
            <el-card class="kkk">
              <table>
                <tr>
                  <th>车辆型号</th>
                  <td v-text="details.carDescription"></td>
                </tr>
                <tr>
                  <th>里程数</th>
                  <td v-text="details.mileage"></td>
                </tr>
                <tr>
                  <th>颜色</th>
                  <td v-text="details.color"></td>
                </tr>
                <tr>
                  <th>价格</th>
                  <td>$150,000</td>
                </tr>
                <tr>
                  <th>车辆状况</th>
                  <td v-text="details.carState"></td>
                </tr>
              </table>

              <div class="contact">
                <h2>联系信息</h2>
                <p>如果您对这辆车感兴趣，请联系我们：</p>
                <p v-text="details.userId"></p>
                <p v-text="">邮箱：info@example.com</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row  gutter="20">
          <el-col span="18" >
            <el-card>
              <div class="placeholder" v-if="isFixed">
              </div> <!-- 占位元素，用于保持文档流 -->
              <nav style="margin: 0 auto;" :class="{ 'fixed': isFixed }"> <!-- 根据 isFixed 属性添加固定样式 -->
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                  <el-menu-item index="1">车辆描述</el-menu-item>
                  <el-menu-item index="2">关键参数</el-menu-item>
                  <el-menu-item index="3">实拍图片</el-menu-item>
                  <el-menu-item index="4">处理中心</el-menu-item>
                </el-menu>
              </nav>
            </el-card>
            <div class="description">
              <h2>车辆描述</h2>
              <p>这是一辆2022年丰田凯美瑞，里程数为10,000英里。车辆状况优秀，外观和内饰都保持得很好。银色的外观非常漂亮，车内宽敞舒适，非常适合家庭使用。</p>
            </div>
            <h3>关键参数</h3>
            <el-col span="12">
              <el-card>
                <!--左边表格-->
                <el-table
                    :data="tableData1"
                    stripe
                    style="width: 100%">
                  <el-table-column
                      prop="date"
                      label="属性名称"
                      width="180">
                  </el-table-column>
                  <el-table-column
                      prop="name"
                      label="属性配置"
                      width="180">
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
            <el-col span="12">
              <el-card>
                <!--右边表格-->
                <el-table
                    :data="tableData2"
                    stripe
                    style="width: 100%">
                  <el-table-column
                      prop="date"
                      label="属性名称"
                      width="120">
                  </el-table-column>
                  <el-table-column
                      prop="name"
                      label="属性配置"
                      width="200">
                  </el-table-column>
                </el-table>
              </el-card>
            </el-col>
            <h3>实拍图片</h3>
            <el-col v-for="item in imageUrlArr" :key="item">
              <img :src="item">
            </el-col>

          </el-col>
          <el-col span="6">
            <el-card>
              <div>

                <div class="content">
                  <!-- 页面内容 -->
                  <h3>相关推荐</h3>
                  <el-card>
                    <h1>广告页面</h1>
                  </el-card>
                  <el-card>
                    <h1>广告页面</h1>
                  </el-card>
                  <el-card>
                    <h1>广告页面</h1>
                  </el-card>
                  <el-card>
                    <h1>广告页面</h1>
                  </el-card>
                  <el-card>
                    <h1>广告页面</h1>
                  </el-card>
                  <el-card>
                    <h1>广告页面</h1>
                  </el-card>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
  </div>

</template>

<script>
import {debounce} from "lodash";

export default {
    data() {
      return {
        isFixed: false,
        activeIndex: '1',
        activeIndex2: '1',
        details:[],
        imageUrlArr:[],
        tableData1: [{
          date: '发动机',
          name: '2.0L',
        }, {
          date: '变速箱',
          name: '自动',
        }, {
          date: '车辆级别',
          name: '中大型车',
        }, {
          date: '颜色',
          name: '黑色',
        },{
          date: '环保标准',
          name: '国Ⅵ',
        },{
          date: '驱动方式',
          name: '后驱',
        },{
          date: '使用性质',
          name: '非运营',
        }],
        tableData2: [{
          date: '发动机功率',
          name: '184马力 (135kw)',
        }, {
          date: '扭矩',
          name: '290 N-m',
        }, {
          date: '长宽高',
          name: '5106*1868*1500',
        }, {
          date: '轴距',
          name: '3105 mm',
        },{
          date: '车身结构',
          name: '三厢车',
        },{
          date: '官方耗油',
          name: '7L',
        },{
          date: '燃油类型',
          name: '汽油',
        }],

      }
    },
    mounted() {
      this.loadCarDetails(),
      window.addEventListener('scroll', this.handleScroll); // 监听滚动事件
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll); // 移除滚动事件监听
    },
    methods:{
      loadCarDetails() {
        let _this=this;
        let carId = _this.$router.currentRoute.query.id;
        _this.http.get('/xiaoming-cars/content/cars/detail/'+carId).then(function (response) {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            console.log('获取车辆详情，成功！');
            console.log(jsonResult.data);
            _this.details = jsonResult.data;
            _this.imageUrlArr=(jsonResult.data.pictures).split(",");
          } else {
            console.log('获取车辆详情，失败！');
            let title = '操作失败';
            this.$alert(jsonResult.message, title, {
              confirmButtonText: '确定',
              callback: action => {
              }
            });
          }
        }).catch(error => {
          let title = '错误';
          let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
          this.$alert(message, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
          console.log(error);
        });
      },

       /*增加防抖处理*/
      order: debounce(function(){
        let _this = this;
        this.$confirm('立即去支付', '男人的梦想GTR', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          //生成订单，并且去后台订单支付页面
          let carId = _this.$router.currentRoute.query.id;
          this.http.post('/xiaoming-order/order/add-new/'+carId).then(function (response) {
            if (response.data.state == 20000) {
              _this.$router.push("/user-center/buy-car");
            } else {
              _this.$message({
                type: 'warning',
                message: '订单生成异常'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下订'
          });
        });
      },300),



      handleSelect(key, keyPath) {//key代表的是上面index的值
        console.log(key, keyPath);
      },
      addToWishlist() {
        // 执行添加到心愿单的逻辑代码
        this.$message({
          message: '已将商品添加到心愿单！',
          type: 'success'
        });
      },
      contactSeller() {
        // 执行联系卖家的逻辑代码
        this.$message({
          message: '正在联系卖家，请稍候！',
          type: 'success'
        });
      },
      handleScroll() {
        // 获取滚动的垂直位置
        const scrollY = window.scrollY || window.pageYOffset;

        // 根据滚动位置设置 isFixed 的值
        this.isFixed = scrollY > 800; // 800 是滚动到达的位置阈值，根据需要调整

        // 可以根据 isFixed 的值来进一步进行一些其他的操作
      },
    }

}
</script>

<style>
/* 固定导航栏的样式 */
nav.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}

/* 占位元素的样式 */
.placeholder {
  height: 50px; /* 与导航栏高度相同 */
}



.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}



/* 登录按钮悬停样式 */
.login-btn:hover {
  background-color: #45a049;
}
.aaa{
  width: 100%;
  list-style-type: none;/*去掉图标*/
  padding:0;
  float: left;
  margin: 0px;
  padding: 0;
}
.bbb{
  width: 14%;
  border-right: 1px solid #ccc;
  padding: 0px;
  float: left;
  margin-right: 10px;
}
.bbb>h6{
  margin-top: 11px;
}


h1 {
  margin-top: 0;
}
.kkk{
  margin: 0px;
}


img {
  max-width: 100%;
  height: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table td, table th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

table th {
  background-color: #f2f2f2;
}

.description {
  margin-top: 20px;
}

.contact {
  margin-top: 20px;
}

.contact h2 {
  margin-top: 0;
}

.contact p {
  margin-bottom: 0;
}



.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.center{
  margin: 0 auto;
  border: 2px solid #0aa1ed;
}
.ccc{
  border: 1px solid #0aa1ed;
}




.c1{
  height: 85px/*;border: 2px solid #0aa1ed*/;border-radius: 5px;

}
.header-set{
  width: 1200px;height: 85px;margin: 0 auto;padding: 0;
}
.brand a{
  line-height: 30px;
  width: 30px;
  text-decoration: none;
  color:#333;
}
.brand a:hover{
  color: #f29600;
}
.brand p{
  padding: 0;margin: 0;font-weight: bold;font-size: 20px
}
.second_main:hover .second_main_p1{
  color:#f29600;
}
.three_a:hover .three-p{
  color:#f29600;
}
.el-tabs__item.is-active {
  color: #f29600;
}
.el-tabs__active-bar{
  background-color: #f29600;
}
.el-tabs__item:hover {
  color: #f29600;
  cursor: pointer;
}
.el-tabs__item.is-active {
  color: #f29600;
}
.header-set .el-input__inner{
  border: 1px solid #f29600;
  border-radius: 0;
}
.el-input.is-active .el-input__inner, .el-input__inner:focus {
  border:2px solid #f29600;
  outline: 0;
}
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #f29600;
  color: #303133;
}

.el-submenu.is-active .el-submenu__title {
  border-bottom-color: #f29600;
}
.el-input-group__append, .el-input-group__prepend{
  color: #f29600;
  border: 2px solid #f29600;
  border-radius: 0;
}


.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #f29600;
  color: #303133;
}
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #f29600;
  color: #f29600;
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #f29600;
  border-color: #f29600;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
  font-weight: bolder;
  color: #303133;
}
.el-checkbox__inner:hover {
  border-color: #f29600;
}

.el-submenu.is-active .el-submenu__title {
  border-bottom-color: #f29600;
}
</style>
